<template>
  <div class="sub-category">
    <div class="container">
      <!-- 面包屑 -->
      <SubBread />
      <!-- 筛选区域 -->
      <SubFilter />
      <!-- 商品展示区域 -->
      <div class="goods-list">
        <!-- 排序组件 -->
        <SubSort />
        <!-- 商品列表 -->
      </div>
    </div>
  </div>
</template>

<script>
import SubFilter from './components/sub-filter.vue'
import SubBread from './components/sub-bread.vue'
import { findSubCategoryFilter } from '@/api/category'
import { onMounted, provide, ref } from 'vue'
import { useRoute } from 'vue-router'
import SubSort from './components/sub-sort.vue'
export default {
  name: 'SubCategory',
  components: {
    SubBread,
    SubFilter,
    SubSort
  },
  setup () {
    const subCateData = ref({})
    const route = useRoute()
    // 注入数据 => 顶层注入一次,下面的子孙组件都可以使用这个数据
    provide('subCateData', subCateData)
    const getSubCateData = async () => {
      const { result } = await findSubCategoryFilter(route.params.id)
      console.log(result)
      // 添加筛选条件 : 默认全部条件数据和选中的状态数据
      //   1.品牌 添加全部数据 和 选中数据

      // 先给所有的品牌添加 是否选中的属性 ,值为false
      result.brands.forEach(brand => {
        brand.selected = false
      })
      //   给当前品牌头部添加 全部条件,默认是选中的状态
      result.brands.unshift({
        id: null,
        name: '全部',
        selected: true
      })

      //   2.规格属性中添加 全部数据 和 选中数据
      //  先给所有的属性添加是否选中的属性,值为fasle
      result.saleProperties.forEach(item => {
        item.properties.forEach(pre => {
          pre.selected = false
        })
        item.properties.unshift({
          id: null,
          name: '全部',
          selected: true
        })
      })

      subCateData.value = result
    }
    onMounted(() => {
      getSubCateData()
    })
    return { subCateData }
  }
}
</script>
<style scoped lang='less'>
.goods-list {
  background: #fff;
  padding: 0 25px;
  margin-top: 25px;
}
</style>
